import React, { useState, useEffect } from 'react'
import { Anchor, Button, Card, Input, Select, message } from 'antd'

const { Link } = Anchor;
const { Option } = Select

const SHANG_KE = require('./img/shangke.jpg')

import './index.scss'

interface shapeOutsideClassListItem {
  id: number,
  name: string,
  introduce: string
}

const LINK = [
  {
    href: '#shape-outside',
    title: '非矩形的形状-形状外部'
  },
  {
    href: '#linear-gradient',
    title: '线性渐变'
  },
  {
    href: '#background-attachment',
    title: '背景附着'
  },
  {
    href: '#outline',
    title: '描边'
  },
  {
    href: '#animationPaused',
    title: '动画暂停'
  },
  {
    href: '#scroll-my',
    title: '滚动捕捉'
  },
  {
    href: '#clip-path',
    title: 'css剪切'
  },
  {
    href: '#ripple',
    title: '水波'
  }
]

const shapeOutsideClassList = [
  {
    id: 1,
    name: 'circle',
    introduce: 'shape-outside: circle(50%);'
  },
  {
    id: 2,
    name: 'ellipse',
    introduce: 'shape-outside: ellipse(130px 140px at 20% 20%);'
  },
  {
    id: 4,
    name: 'polygon',
    introduce: 'shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);'
  },
  
]

const COLOR = [
  {
    id: 1,
    name: 'red'
  },
  {
    id: 2,
    name: 'green'
  },
  {
    id: 3,
    name: 'gold'
  },
  {
    id: 4,
    name: 'pink'
  },
]

const ModalOne = () => {
  const [targetE, settargetE] = useState<HTMLElement | null>(null);
  const [shapeOutsideClass, setShapeOutsideClass] = useState<string>('shape-outside')
  const [linearGradient, setLinearGradient] = useState<any>([])
  const [linearGradientStyle, setLinearGradientStyle] = useState<any>({})

  const [backgroundAttachment, setBackgroundAttachment] = useState<string>('scroll')

  const [outline, setOutline] = useState<string>('10px')

  const [scrollType, setScrollType] = useState<string>('none')

  const [clipPath, setClipPath] = useState<string>('none')

  useEffect(() => {
    document.getElementById('content-root') && settargetE(document.getElementById('content-root'))
  }, [])

  const handleAnchorClick = (e: any) => {
    e.preventDefault();
  };

  const linearGradientStyleChange = (value: any, type: number) => {
    let linearGradientVar = [...linearGradient]
    linearGradientVar[type] = value
    let linearGradientStyleVar = { ...linearGradientStyle }
    linearGradientStyleVar = {
      background: `linear-gradient(${linearGradientVar.toString()})`
    }
    setLinearGradientStyle(linearGradientStyleVar)
    setLinearGradient(
      linearGradientVar
    )
  }

  return (
    <div id='model-one'>
      <div className='main'>
        <div id='shape-outside'>
          <Card
            hoverable
            title={
            <a
              target='_blank'
              href='https://developer.mozilla.org/zh-CN/docs/Web/CSS/shape-outside'
              title='去MDN查看'
            >非矩形的形状-形状外部(不要自以为是了。你以为自己是方的，在别人眼里你却是圆的)</a>
          }
            extra={<Button onClick={ () => setShapeOutsideClass('')  }>重置</Button>}
          >
            <ul>
              {
                shapeOutsideClassList.map((i: shapeOutsideClassListItem) => {
                  return (
                  <li
                    className={ 'shape-outside-list' + ` ${ shapeOutsideClass === i.name && 'selected' }` }
                    key={ i.name }
                    onClick={ () => setShapeOutsideClass(i.name) }
                  >
                    <code>{ i.introduce }</code>
                  </li>)
                })
              }
            </ul>
            <div className='shape-outside-content'>
              <img
                className={ 'shape-outside-content-img' + ` ${ shapeOutsideClass }`}
                src={ SHANG_KE }
              />
                点击上面的选项,可以改变样式.
                shape-outside的CSS 属性定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。
                默认情况下，内联内容包围其边距框;
                shape-outside提供了一种自定义此包装的方法，可以将文本包装在复杂对象周围而不是简单的框中。
            </div>
          </Card>
        </div>
        <div id='linear-gradient'>
          <Card
            hoverable
            title={
              <a
                target='_blank'
                href='https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient()'
                title='去MDN查看'
              >渐变(css绘制彩带的原理 | 进度条)</a>
            }
            extra={<Button onClick={ () => {
              setLinearGradientStyle('') 
            }}>重置</Button>}
          >
            <div className='options-group'>
              <Select
                onChange={(value) => {
                  linearGradientStyleChange(value, 0)
                }}
                style={{ width: 200 }}
              >
                <Option value='to right'>to right</Option>
                <Option value='to left'>to Left</Option>
                <Option value='to bottom right'>to bottom right</Option>
                <Option value='to bottom left'>to bottom left</Option>
              </Select>
              <Input
                style={{ width: 200 }}
                placeholder='角度'
                onChange={ (e) => {
                  linearGradientStyleChange(e.target.value + 'deg', 0)
                }}
              />
               <Select
                onChange={(value) => {
                  linearGradientStyleChange(value, 1)
                }}
                style={{ width: 200 }}
                placeholder='颜色'
              >
                {
                  COLOR.map((i: any) => {
                    return (
                      <Option key={ i.id } value={ i.name }>{ i.name }</Option>
                    )
                  })
                }
              </Select>
              <Select
                onChange={(value) => {
                  linearGradientStyleChange(value, 2)
                }}
                style={{ width: 200 }}
                placeholder='颜色'
              >
                {
                  COLOR.map((i: any) => {
                    return (
                      <Option key={ i.id } value={ i.name }>{ i.name }</Option>
                    )
                  })
                }
              </Select>
            </div>
            <div
              className='linear-gradient-content'
              style={{
                ...linearGradientStyle
              }}
            >
              {
               (linearGradientStyle && Object.keys(linearGradientStyle).length > 0 && `就离谱`)
               || 'repeating-linear-gradient(-45deg, #D9CFBB  25%, #C3B393 0, #C3B393 50%,#D9CFBB 0, #D9CFBB 75%, #C3B393 0)'
              }
            </div>
          </Card>
        </div>
        <div id='background-attachment'>
          <Card
            hoverable
            title={
              <a
                target='_blank'
                href='https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-attachment'
                title='去MDN查看'
              >背景固定(如何附着在容器上，注意其属性值local和fixed的使用)</a>
          }
            extra={<Button onClick={ () => setBackgroundAttachment('local')  }>重置</Button>}
          >
            <div className='options-group'>
              <Select
                onChange={(value: string) => {
                  setBackgroundAttachment(value)
                }}
                style={{ width: 200 }}
                placeholder='固定方式'
              >
                <Option value='local'>local</Option>
                <Option value='fixed'>fixed</Option>
                <Option value='scroll'>scroll</Option>
              </Select>
            </div>
            <div
              className='linear-gradient-content'
              style={{
                height: 200,
                overflowY: 'scroll',
                background: `url(${ SHANG_KE })`,
                backgroundAttachment
              }}
            >
              <div style={{ height: 400 }}>
                <ul>
                  <li>
                  fixed
                    <li>
                      此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
                    </li>
                  </li>
                  <li>
                  local
                    <li>
                    此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，
                    </li>
                  </li>
                  <li>
                  scroll
                    <li>
                    此关键属性值表示背景相对于元素本身固定， 而不是随着它的内容滚动（对元素边框是有效的）。
                    </li>
                  </li>
                </ul>
              </div>
            </div>
          </Card>
        </div>

        <div id='outline'>
          <Card
            hoverable
            title={
            <a
              target='_blank'
              href='https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-attachment'
              title='去MDN查看'
            >outline使用(以使用outline来描边，不占地方，它甚至可以在里面)</a>
          }
            extra={<Button onClick={ () => setOutline('10px')  }>重置</Button>}
          >
            <div className='options-group'>
              <Select
                onChange={(value: string) => {
                  setOutline(value)
                }}
                style={{ width: 200 }}
                placeholder='描边方向'
                value={outline}
              >
                <Option value='10px'>外面</Option>
                <Option value='-20px'>里面</Option>
              </Select>
            </div>
            <div
              className='linear-gradient-content'
              style={{
                height: 200,
                margin: '30px',
                background: 'pink',
                outline: `dashed red`,
                outlineOffset: outline
              }}
            >
              语法
              颜色 样式 宽度
            </div>
          </Card>
        </div>

        <div id='animationPaused'>
          <Card
            hoverable
            title={
              <a
                target='_blank'
                href='https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-play-state'
                title='去MDN查看'
              >动画暂停(animation-play-state)</a>
            }
          >
            <div className='animationPaused-content'>
              hover
            </div>
              语法
              <h6>animation-play-state: running</h6>
              当前动画正在运行。
              <h6>animation-play-state: paused</h6>
              当前动画已被停止。
              <h5>补充</h5>
              动画结束事件
          </Card>
        </div>

        <div id='scroll-my'>
          <Card
            hoverable
            title={
              <a
                target='_blank'
                href='https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-snap-type'
                title='去MDN查看'
              >滚动捕捉(更好的滚动体验)</a>
            }
            extra={<Button onClick={ () => setScrollType('none  ')  }>重置</Button>}
          >
             <Select
                onChange={(value: string) => {
                  setScrollType(value)
                }}
                style={{ width: 200 }}
                placeholder='临界值'
                value={scrollType}
              >
                <Option value='none'>none</Option>
                <Option value='x mandatory'>mandatory(大)</Option>
                <Option value='x proximity'>proximity(小)</Option>
              </Select>
            <div className='scroll-my' style={{
              scrollSnapType: scrollType
            }}>
              <img src="https://picsum.photos/500/300?random=1" alt="" />
              <img src="https://picsum.photos/500/300?random=2" alt=""/>
              <img src="https://picsum.photos/500/300?random=4" alt=""/>
              <img src="https://picsum.photos/500/300?random=5" alt=""/>
            </div>
              <h5>滚动到图片的临界值</h5>
              <h6>说明</h6>
              mandatory
              <p>
                如果它当前没有被滚动，这个滚动容器的可视视图将静止在临时点上。意思是当滚动动作结束，如果可能，它会临时在那个点上。如果内容被添加、移动、删除或者重置大小，滚动偏移将被调整为保持静止在临时点上。
              </p>
              proximity
              <p>
                如果它当前没有被滚动，这个滚动容器的可视视图将基于基于用户代理滚动的参数去到临时点上。如果内容被添加、移动、删除或者重置大小，滚动偏移将被调整为保持静止在临时点上。
              </p>
          </Card>
        </div>

        <div id='clip-path'>
          <Card
            hoverable
            title={
              <a
                target='_blank'
                href='https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path'
                title='去MDN查看'
              >css剪切(clip-path)</a>
            }
            extra={<Button onClick={ () => setClipPath('none')  }>重置</Button>}
          >
             <Select
                onChange={(value: string) => {
                  setClipPath(value)
                }}
                style={{ width: 200 }}
                placeholder='剪切path'
                value={clipPath}
              >
                <Option value='none'>不做剪切</Option>
                <Option value='circle(40%)'> 圆</Option>
                <Option value='polygon(50% 0, 100% 50%, 50% 100%, 0 50%)'>
                  菱形
                </Option>
                <Option value={`path('M 0 226 L 0,113  A 5,5 0,0,1 226,113 L 226 226 z')`}>笼子</Option>
                <Option value={`path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z')`}>
                  心形
                </Option>
              </Select>
              <img
                className='clip-path'
                src="https://picsum.photos/500/300?random=1"
                alt=""
                style={{
                  clipPath
                }}
              />
          </Card>
        </div>

        <div id='ripple'>
          <Card
            hoverable
            title={
              <a
                target='_blank'
                href='https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path'
                title='去MDN查看'
              >水波(偷个懒)</a>
            }
          >
            <img
              src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/7/29/16c3d51c0ada68da~tplv-t2oaga2asx-zoom-in-crop-mark:652:0:0:0.awebp                "
              alt=""
            />
          </Card>
        </div>
      </div>
      <Anchor
        className='Anchor-my'
        onClick={handleAnchorClick}
        getContainer={ () => {
          let result = targetE || window
          return result
        }}
      >
        {
          LINK.map((i: any) => {
            return (
              <Link { ...i } key={ i.link } />
            )
          })
        }
      </Anchor>
     
    </div>
  )
}
export default ModalOne